import {useCallback, useRef, useState} from 'react';
import {GridThree} from '../../../components';
import {dpw12, dpw8} from '../../../constants';
import {BindItem, BtnItem} from '../../../mobx/home';
import Banner from './Banner';
import BtnListDom from './BtnListDom';
import {ArticleList} from '../../../services';
import {View} from 'react-native';

interface ModelTwoProps {
  Title: string;
  bindList: BindItem[];
  btnList: BtnItem[];
  navigation?: any;
  typeId?: number;
  tempType: number;
  scrollToTop?: any;
}

const ModelTwo = (props: ModelTwoProps) => {
  const {Title, bindList, navigation, typeId, scrollToTop, btnList} = props;
  const idxRef = useRef(2);
  const [list, setList] = useState([]);

  const changeData = useCallback(
    (bId: number) => {
      ArticleList({
        Category: bId,
        Status: -1,
        Type: -1,
        PageIndex: idxRef.current,
        PageSize: bindList?.length,
        ArticleType: typeId,
      })
        .then((res: any) => {
          if (Array.isArray(res?.Data) && res?.Data?.length > 0) {
            idxRef.current += 1;
            setList(res.Data);
          } else {
            throw new Error('');
          }
        })
        .catch(() => {
          idxRef.current = 2;
        });
    },
    [typeId, bindList?.length],
  );

  return (
    <>
      <Banner
        list={list.length > 0 ? list : bindList}
        style={{marginBottom: dpw12}}
        navigation={navigation}
      />
      <GridThree
        list={(list.length > 0 ? list : bindList).slice(0, 3)}
        type={1}
        navigation={navigation}
      />
      <BtnListDom
        list={btnList}
        scrollToTop={scrollToTop}
        navigation={navigation}
        idx={typeId}
        Title={Title}
        changeData={changeData}
      />
    </>
  );
};

export default ModelTwo;
